<template>
 <div v-show="!cardLoading" class="card" :id="tabType === 'cdr_call'?'cdr_call_id': ''">
    <el-menu
      @select="handleSelect"
      :router="active"
      :default-active = "defaultActive"
      class="el-menu-vertical-demo">
      <el-menu-item style="padding: 0"
                    v-for="(item, index) in cardList"
                    :key="item.CALL_SHEET_ID + index"
                    :index="handleSplit(item._id, item.CUSTOMER_ID)"
                    :id="tabType ==='cdr_call'?'call_'+item._id:''"
                    :class="{'custom-is-active': $route.path.split('/')[4] === item._id}">
        <div class="phon" :class="{phon_call: tabType === 'cdr_call',customvar_height:item.CUSTOMVAR}">
          <label v-show="tabType === 'cdr_my' || tabType === 'cdr_all'" class="fake-checkbox" :class="{'visible': batch[tabType].isBatchShow}" v-on:click.stop="">
            <input type="checkbox" class="fbox" :value="item._id" v-model="item.checked" @change="checkThis(item.checked)">
            <span></span>
            <i class="fake-label"></i>
          </label>
          <el-tooltip class="item" effect="dark" :content="$t('call.transferMessage', {transferFrom: item.transferFromWhenWaitTimeoutNum, transferTo: item.transferToWhenWaitTimeoutNum})" placement="bottom" v-show="tabType === 'cdr_call' && item.waitTimeOut === '1'">
            <i class="icon iconfont icon-chao"></i>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" :content="$t('call.transferMessage', {transferFrom: item.transferFrom, transferTo: item.transferTo})" placement="bottom" v-show="tabType === 'cdr_call' && item.transferFrom && item.transferTo">
            <i class="icon iconfont icon-zhuanjie3"></i>
          </el-tooltip>
          <i class="iconfont" v-show="tabType !== 'cdr_call'" :class="(item.CONNECT_TYPE==='dialout'||item.CONNECT_TYPE==='dialTransfer')?'icon-waihu':'icon-huru'"></i>
          <span class="call">
            <span class="icon-group" :class="tabType === 'cdr_all'?'icon-text-right':''">
              <i class="icon iconfont icon-biaoji edit-mark" data-v-7moor v-show="(item.upOrHandUpObj && item.upOrHandUpObj.status === 'up') || tabType !== 'cdr_call'" :title="$t('softPhoneBar.noteAndLabel')" @click.stop="showCallNote(item)"></i>
              <i class="icon iconfont icon-dadianhua" data-v-7moor v-show="tabType !== 'cdr_call' && tabType !== 'cdr_outbound'" :title="$t('softPhoneBar.callout')" @click.stop="softBarDialoutPopup(item.QUICK_QUERY_NUM)"></i>
              <i data-v-7moor v-show="tabType !=='cdr_all'" class="icon iconfont icon-qiapianshangdeguanbi" :title="$t('public.colse')" @click.stop="removePendingToHandle(item.CALL_SHEET_ID,item.CUSTOMER_ID,item.CONNECT_TYPE,item.STATUS, tabType, item.status)"></i>
            </span>
            <div class="middle">
              <div class="cust-name-wrap" :class="tabType === 'cdr_call'?'cdr-call-name':''" :title="item.CUSTOMER_NAME || $t('public.unknownCustomer')">
                <span class="cust-name ellipsis">
                  {{item.CUSTOMER_NAME || $t('public.unknownCustomer')}}
                   <i v-show="tabType === 'cdr_call'" :class="item.unRead?'callIsRead':''"></i>
                </span>
                <i class="icon iconfont icon-biaoji1 key-tag" :title="$t('call.sign')" v-show="item.KEY_TAG && isSameCallID(item.CALL_SHEET_ID)"></i>
                <span class="time" :class="(tabType === 'cdr_call')?'time2':''">{{item.callTime}}</span>
                <div class="trans-icon-wrap" style="display: inline" v-show="(tabType === 'cdr_call' || tabType === 'cdr_outbound') && hasTransAuth && !(item.transferFrom && item.transferTo)" @click.stop="transText(index, true, item.CALL_SHEET_ID)">
                  <i class="iconfont icon-yuyinzhuanxie zhuanxieicon"></i>
                </div>
              </div>
            </div>
            <div class="middle2 clearfix">
              <span class="moddle2-left">
                <b class="cust-phone ellipsis" :title="item.checkHideNum"><span>{{item.checkHideNum}}</span></b>
                <!-- <b v-show="item.PROVINCE && item.PROVINCE==item.DISTRICT && !isHidenArea" class="city pro-city ellipsis" :title="item.PROVINCE">({{item.PROVINCE}})</b>
                <b v-show="item.PROVINCE && item.PROVINCE!=item.DISTRICT && !isHidenArea" class="city pro-city ellipsis" :title="item.PROVINCE+'-'+item.DISTRICT">({{item.PROVINCE}}-{{item.DISTRICT}})</b> -->
                <el-tooltip class="item" :content="callText(item)" :placement="'bottom-start'">
                  <b><span v-show="item.PROVINCE && item.PROVINCE==item.DISTRICT && !isHidenArea">({{item.PROVINCE}})</span><span v-show="item.PROVINCE && item.PROVINCE!=item.DISTRICT && !isHidenArea" class="city pro-city ellipsis" :title="item.PROVINCE+'-'+item.DISTRICT">({{item.PROVINCE}}-{{item.DISTRICT}})</span><span v-show="item.CUSTOMER_MEMO && isShowCallMemo">({{item.CUSTOMER_MEMO}})</span></b>
                </el-tooltip>
                <i v-show="item.REPEAT_CALL" class="iconfont hour-box" :class="item.REPEAT_CALL==='48h'?'icon-H':'icon-H1'"></i>
              </span>
              <b :class="item.STATUS" class="sta fr ellipsis" v-show="tabType !== 'cdr_call'">{{item.statusName}}</b>
              <span v-if="tabType==='cdr_call' && (item.ivrkey || item.TANPING)" class="ivrKey-wrap" :class="item.CUSTOMVAR?'custom_ivrkey':''">
                <ivr-key-detail :ivrkey="item.ivrkey" :tanping="item.TANPING" :keyMemoMap="keyMemoMap"></ivr-key-detail>
              </span>
              <!--此v-if可先不优化，按键详情-->
            </div>
            <div v-show="tabType !== 'cdr_call'" class="middle3 clearfix">
             <span v-show="tabType !== 'cdr_call' && tabType !== 'cdr_outbound'" class="call-time-len"> {{item.callTimeLen}}</span>
              <span class="play fr" v-show="tabType !== 'cdr_call' && item.CALL_TIME_LENGTH && isListent" @click.stop="showListentWindow(item.FILE_SERVER, item.RECORD_FILE_NAME, item.STATUS, item.PBX, item.CALL_TIME_LENGTH)"><strong></strong></span>
               <span v-if="item.SERVICENUMALIAS" class="callend-num ellipsis">{{item.SERVICENUMALIAS}}</span>
              <span v-else class='fl ellipsis callend-num' :title="(item.CONNECT_TYPE==='dialout'||item.CONNECT_TYPE==='dialTransfer')?item.CALL_NO:item.CALLED_NO">{{(item.CONNECT_TYPE==='dialout'||item.CONNECT_TYPE==='dialTransfer')?item.CALL_NO:item.CALLED_NO}}</span>
               <span v-if="item.CUSTOMER_STATUS && tabType === 'cdr_outbound'" v-statusColor="item.CUSTOMER_STATUS" class="cust-type ellipsis fr">
               {{item.customerStatus}}
              </span>
            </div>
            <div class="middle4 clearfix" v-show="tabType !== 'cdr_call' && tabType !== 'cdr_outbound'">
              <span class="ellipsis agent-name middle4-con" >
                <span v-show="item.DISPOSAL_AGENT">{{item.agentName}}</span>
                <span class="queues-name-wrap" v-show="item.ERROR_MEMO">(<span class="queues-name">{{item.queueName}}</span>)</span>
              </span>
              <span v-if='item.CUSTOMER_STATUS' v-statusColor="item.CUSTOMER_STATUS" class="cust-type ellipsis fr">
                {{item.customerStatus}}
              </span>
            </div>
            <div v-if="tabType === 'cdr_call'" class="middle4 clearfix">
              <span class="middle4-con ellipsis">
                <span class="server-name">{{item.SERVICENUMALIAS?item.SERVICENUMALIAS:item.CALLED_NO}}</span>
                <i class="icon iconfont icon-dailingqu" v-show="item.QUEUE_NAME"></i>
                <span v-show="item.QUEUE_NAME" :title="$t('public.queues')">{{item.QUEUE_NAME}}</span>
              </span>
              <span v-if='item.CUSTOMER_STATUS' v-statusColor="item.CUSTOMER_STATUS" class="cust-type ellipsis fr">
               {{item.customerStatus}}
              </span>
            </div>
            <div v-if="tabType === 'cdr_call' && item.CUSTOMVAR" class="customvar-style">
              {{item.CUSTOMVAR}}
            </div>
          </span>
        </div>
        <div v-if="(tabType === 'cdr_call' || tabType === 'cdr_outbound') && item.callTransText" style="background: white">
          <call-trans @packUp="transText(index, false)" :callSheetId="item.CALL_SHEET_ID" :startTime="item.OFFERING_TIME" :transData ='item'></call-trans>
        </div>
      </el-menu-item>
    </el-menu>
   <el-dialog modal-append-to-body lock-scroll top="10%" :title="$t('call.listenAudio')" :visible.sync="listent" @close="closeModal" @open="openModal">
     <old-audio-common v-if="showOld" flagId="callCardOldAudio" :srcUrl="fileServer + '/' + fileName" :refreshAudio="refreshAudio" :isShowAudioDownload="false" :isShowSubmitAudio="false"  :currentObj="{}" :isDownload="false"></old-audio-common>
     <audio-common v-if="!showOld" @showOldAudio="showOldAudio" :callStatus = "callStatus" flagId="callCardAudio" :srcUrl="fileServer + '/' + fileName" :refreshAudio="refreshAudio"  :isShowAudioDownload="false" :isShowSubmitAudio="false" :currentObj="{}" :pauseAudio="pauseAudio"></audio-common>
   </el-dialog>
   <label-and-note ref="labelAndNote" :phoneBarFlag="false" :callSheetId="callSheetId"></label-and-note>
    <no-record v-show="cardList && cardList.length<=0"></no-record>
  <!-- 批处理开始 -->
    <div class="batch_cover" :class="{'navMenuState': navMenuState}" v-show="batch[tabType].isBatchShow"></div>
    <div class="batch_btm" v-show="batch[tabType].isBatchShow"></div>
    <div class="batch" :class="{'show': batch[tabType].isBatchShow, 'navMenuState': navMenuState}">
      <el-checkbox v-model.trim="batch[tabType].allChecked" @change="checkAll()">{{$t('public.checkAll')}}</el-checkbox>
      <card-batch v-if="batch[tabType].operator"
      :tabType="tabType"
      :batchOperator="batch[tabType]"
      @exportExcel="exportExcel"
      @exportTask="exportTask"
      @exportChat="exportChat"
      @checkNone="checkNone"
      ></card-batch>
    </div>
    <el-dialog :close-on-click-modal="false" modal-append-to-body :title="$t('call.selfDefineName')" :visible.sync="defineDialogForm" width="30%">
     <el-form>
       <el-input
         type="text"
         :rows="2"
         placeholder=""
         style="width:100%"
         v-model="defaultName">
       </el-input>
       <p style='margin-top:15px'>{{$t('public.note')}}</p>
       <el-input
          type="textarea"
          autosize
          :placeholder="$t('public.pleaseEnter')"
          v-model="recordRemark">
        </el-input>
     </el-form>
     <div slot="footer" class="dialog-footer">
       <el-button type="primary" class="primary_btn" @click="confirmDownloadMonitor">{{$t('public.confirm')}}</el-button>
     </div>
    </el-dialog>
  <!-- 批处理结束 -->
  <exportDialog :exportDialogTitle = '$t("call.callInfo")' :isShow='callExport.exportTypeTip' :exportHeads = 'exportHeadsComputed' :exportCustomerHeads='cusFieldArr' :isCall="exportDialogIsCall" :isExportTask="exportRemark.show" :showDerivedTransferAgent='showDerivedTransferAgent' @exportDialogDefineFun="callExportTypeSelect" @exportDialogCancelFun='exportDialogCancelFun' v-if='callExport.exportTypeTip' :isHiddenAssociate='callExport.isHiddenAssociate' :isChatExport='isChatExport'></exportDialog>
  </div>
</template>
<script type="text/javascript">
  // 此组件是通话卡片
  import Vue from 'vue'
  import CustomerAvatar from '@/components/ui-modules/customer-avatar/CustomerAvatar'
  import CardBatch from '@/components/public-modules/card/CardBatch'
  import NoRecord from '@/components/public-modules/card/NoRecord'
  import Queues from '@/components/public-modules/cache/Queues'
  import IvrKeyDetail from '@/components/business-modules/call/IvrKeyDetail.vue'
  import AudioCommon from '@/components/public-modules/audio'
  import OldAudioCommon from '@/components/public-modules/audio/audio.vue'
  import { statusCustColorArr } from '@/utils/reportUtils'
  import exportDialog from '@/components/public-modules/export/exportDialog.vue'
  import { _getSearchCondition, isHasFunc, isHasMenu, getCallTimeLength, timeFormat, checkHideTel, getStrLength, getFormatDateTime, deepClone, getCache, m7Language, dateParse, getAllUseSingleCallLabel, getAllUseMultiCallLabel } from '@/utils/m7Utils.js'
  import CallTrans from './trans.vue'
  import LabelAndNote from './LabelAndNote.vue'
import { retrieveUsers } from '@/store/modules/config/callCenter/outBoundCallLine/actions'
  export default {
    name: 'CallCard',
    props: {
      allCount: Number,
      qu: Object,
      loading: Boolean,
      callCardList: {
        type: Array,
        default: function () {
          return []
        }
      },
      type: String,
      tabType: String,
      condition: Object,
      clearChecked: String
    },
    data () {
      return {
        serviceNoList: [],
        refreshNum: 0,
        isShowCallMemo: false,
        isHidenArea: false,
        pauseAudio: 'open',
        showOld: false,
        keyMemoMap: {},
        cardLoading: true,
        sameId: false,
        checked: false,
        isCheckbox: false,
        isCall: true,
        isListent: false,
        listent: false,
        fileServer: '',
        callStatus: '',
        active: true,
        defaultActive: '',
        fileName: '',
        callTimeLen: 0,
        customerNote: '',
        callNote: false,
        callSheetId: '',
        refreshAudio: 0,
        batch: {
          cdr_call: {
            batchItem: [],
            allChecked: false,
            isBatchShow: false,
            checkedCount: 0
          },
          cdr_outbound: {
            batchItem: [],
            allChecked: false,
            isBatchShow: false,
            checkedCount: 0
          },
          cdr_pending: {
            batchItem: [],
            allChecked: false,
            isBatchShow: false,
            checkedCount: 0,
            operator: [
              {name: 'public.export', class: 'icon-daochu1', action: 'exportExcel'},
              {name: 'public.exportTask', class: 'icon-piliang', action: 'exportTask'}
            ]
          },
          cdr_my: {
            batchItem: [],
            allChecked: false,
            isBatchShow: false,
            checkedCount: 0,
            operator: [
              {name: 'public.export', class: 'icon-daochu1', action: 'exportExcel'},
              {name: 'public.exportTask', class: 'icon-piliang', action: 'exportTask'}
            ]
          },
          cdr_all: {
            batchItem: [],
            allChecked: false,
            isBatchShow: false,
            checkedCount: 0,
            operator: [
              {name: 'public.export', class: 'icon-daochu1', action: 'exportExcel'},
              {name: 'public.exportTask', class: 'icon-piliang', action: 'exportTask'}
            ]
          }
        },
        isEnglis: '',
        defineDialogForm: false,
        defaultName: '',
        queryData: '',
        exportTaskLimit: {},
        statusColors: statusCustColorArr,
        callExport: {
          exportTypeTip: false,
          exportType: 'csv',
          param: {},
          isIvR: false,
          isCust: true,
          isHiddenAssociate: false
        },
        exportHeads: [
          {name: 'CALL_SHEET_ID', value: this.$t('call.callNumber')},
          {name: 'CUSTOMER_NAME', value: this.$t('public.locationCustomer')},
          {name: 'CALL_NO', value: this.$t('call.mainCallNum')},
          {name: 'CALLED_NO', value: this.$t('call.passiveCallNum')},
          {name: 'CONNECT_TYPE', value: this.$t('call.callType')},
          {name: 'OFFERING_TIME', value: this.$t('public.callTime')},
          {name: 'BEGIN_TIME', value: this.$t('call.pickUpTime')},
          {name: 'TALK_TIME', value: this.$t('call.callTime')},
          {name: 'RING_TIME_LENGTH', value: this.$t('call.ringLength')},
          {name: 'DISPOSAL_AGENT', value: this.$t('call.callRingSeat')},
          {name: 'EXTEN', value: this.$t('public.jobNumber')},
          {name: 'REPEATCALLDEALAGENT', value: this.$t('call.first_time_agent')},
          {name: 'STATUS', value: this.$t('public.callStatus')},
          {name: 'QUEUE_NAME', value: this.$t('call.errorMemo')},
          {name: 'INVESTIGATE', value: this.$t('public.satisfaction')},
          {name: 'CHILD_INVESTIGATE', value: this.$t('call.Secondary_satisfaction')},
          {name: 'PROVINCE', value: this.$t('public.province')},
          {name: 'DISTRICT', value: this.$t('public.city')},
          {name: 'KEY_TAG', value: this.$t('call.sign')},
          {name: 'QUEUE_TIME_LENGTH', value: this.$t('call.queueLen')},
          {name: 'END_TIME', value: this.$t('call.handUpTime')},
          {name: 'COMMENTS', value: this.$t('public.note')},
          {name: 'LABELS', value: this.$t('call.callLabelAndSQ')},
          {name: 'REPEAT_CALL', value: this.$t('call.repeatCall')},
          {name: 'IS_BUSINESS_ASSOCIATED', value: this.$t('call.RelatedJobList')},
          {name: 'ASSOCIATED_BUSINESS_NUMBER', value: this.$t('call.RelatedJobListNumber')},
          {name: 'QUICK_HANGUP', value: this.$t('call.fastHangup')},
          {name: 'HANGUP_USER', value: this.$t('call.inHangUpUser')},
          {name: 'SERVICENUM_ALIAS', value: this.$t('call.serviceNumberName'),unChecked:true},
          {name: 'REF_DISPOSAL_AGENT', value: this.$t('call.transferBeforeSeat')}
        ],
        cusFieldArr: [],
        headers:[], // 自定义表头需要的参数
        exportRemark: {
          show: true,
          text: ''
        },
        DerivedTransferSeats: false, //是否导出流转座席
        recordRemark: '',
        exportDialogIsCall: true,
        exportCdrExcelData: {},
        hasTransAuth: false,
        isChatExport: false,
        showDerivedTransferAgent: false
      }
    },
    filters: {

    },
    computed: {
      cardList () {
        let list = this.callCardList || []
        for (let i = 0; i < list.length; i++) {
          if (this.tabType === 'cdr_call' || this.tabType === 'cdr_outbound') { // 来电匹配服务号名称
            const phoneNumber = this.tabType === 'cdr_call' ? list[i].CALLED_NO : list[i].CALL_NO
            if (phoneNumber) {
              let serverNoList = this.serviceNoList || []
              for (let m = 0; m < serverNoList.length; m++) {
                if (serverNoList[m].Exten === phoneNumber && serverNoList[m].DisplayName) {
                  list[i].SERVICENUMALIAS = serverNoList[m].DisplayName
                  break
                }
              }
            }
          }
//          list[i].CUSTOMER_ID = '00000000000000000000'
          let agentObj = ''
          if (this.$store.getters.agents) {
            agentObj = this.$store.getters.agents[list[i].DISPOSAL_AGENT] || ''
          }
          if (agentObj) {
            list[i].agentName = agentObj.displayName || ''
          } else {
            list[i].agentName = ''
          }
          if (this.isEnglis === 'en' && (list[i].CUSTOMER_ID === '00000000000000000000' || !list[i].CUSTOMER_ID)) {
            if (list[i].CUSTOMER_NAME === '多个匹配客户') {
              list[i].CUSTOMER_NAME = this.$t('customer.customerSlot.unlocation')
            } else if (list[i].CUSTOMER_NAME === '未知客户') {
              list[i].CUSTOMER_NAME = this.$t('public.unknownCustomer')
            }
          }
          list[i].statusName = this.getResultNameById(list[i].STATUS, 'status') // 处理通话状态名称
          list[i].queueName = this.getResultNameById(list[i].ERROR_MEMO, 'queues') // 处理技能组名称
          list[i].customerStatus = this.getStatusName(list[i].CUSTOMER_STATUS) // 客户状态
          list[i].callTime = timeFormat(list[i].OFFERING_TIME, 'card') // 通话时间
          list[i].callTimeLen = getCallTimeLength(list[i].CALL_TIME_LENGTH) // 通话时长
          list[i].checkHideNum = (list[i].CONNECT_TYPE === 'dialout' || list[i].CONNECT_TYPE === 'dialTransfer') ? checkHideTel(list[i].CALLED_NO, this.$store.state.session.user) : checkHideTel(list[i].CALL_NO, this.$store.state.session.user) // 隐藏号码
        }
        return list
      },
      getKeyTagArr () { // CALL_SHEET_ID
        return this.$store.state.call.transCache.showKeyTagArr
      },
      cdrCallData () {
        let cdrCall = this.$store.state.call.callList.cdr_call.list
        if (cdrCall && cdrCall.length > 0) {
          return true
        }
      },
      getServerUrl () {
        let pbxid = this.$store.state.session.user.pbx
        let curpbx = ''
        let assDomain = ''
        if (pbxid) {
          curpbx = getCache('accountPbx', pbxid)
          assDomain = curpbx.assAddr
        }
        return assDomain
      },
      navMenuState () {
        return this.$store.state.navMenuState || false
      },
      exportHeadsComputed () {
        let accountId = this.$store.state.session.account.account 
        if (accountId === 'N00000015995' || accountId === 'N00000017122' || accountId === 'N00000002407' || accountId === 'N00000002685'  || accountId === 'N00000003731' || accountId === 'T00000000003') {
          this.exportHeads.push({name: 'REPEAT_CALL_DEAL_AGENT_SKILL', value: this.$t('call.repeatcalldealangent')}, {name: 'REPEAT_CALL_DEAL_STATUS', value: this.$t('call.reapeat_call_deal_status')})
        }
        if ((accountId === 'N00000002171' || accountId === 'N00000002407' || accountId === 'N00000002630' || accountId === 'N00000003731' || accountId === 'T00000000003')) {
          this.exportHeads.push({name: 'TRANSFER_AGENT', value: '流转座席',unChecked:true})
        }
        let key = this.$store.state.session.sessionId + 'callExportHeaders'
        let callExportHeaders = JSON.parse(window.localStorage.getItem(key))
        this.listUnchecked(callExportHeaders)
        return this.exportHeads
      }
    },
    methods: {
      getAllUseCallLabeles () {
        let labelType = this.$store.state.call.transCache.callLabelType
        let allLabel = this.$getCache('callLabel')
        if (allLabel === -1) {
          allLabel = []
        }
        let singleObj = getAllUseSingleCallLabel(allLabel) // 每次都要重新存，不然子组件检测不到变化
        this.$store.commit('call/SET_CALL_SINGLE_LABEL', singleObj)
        let multiObj = getAllUseMultiCallLabel(allLabel)
        this.$store.commit('call/SET_CALL_MULTI_LABEL', multiObj)
        if (labelType === 'single') {
          this.getSingleLabel = singleObj.singleLabel
        } else if (labelType === 'multi') {
          this.getMultiLabel = multiObj
          let labelIdObj = JSON.parse(window.localStorage.getItem('labelIdObj'))
          if (labelIdObj) {
            let newCallId = this.$store.state.cti.globalLet.currentCallSheetId
            if (newCallId) { // 前提要先先取到当前的通话id
              let localCallId = labelIdObj.callId
              if (newCallId !== localCallId) { // 当前id和本地存储的id不一致时，重新储存
                window.localStorage.setItem('labelIdObj', JSON.stringify({'callId': newCallId, 'labelIdArray': []}))
              }
              let obj = JSON.parse(window.localStorage.getItem('labelIdObj'))
              if (obj) {
                if (obj.labelIdArray) {
                  this.checkLabels = obj.labelIdArray
                } else {
                  this.checkLabels = []
                }
              }
            }
          }
        }
      },
      transText (num, boolean, callId) {
        if (callId && this.$store.state.call.transCallSheetId && callId === this.$store.state.call.transCallSheetId) {
          this.$store.dispatch('updateTranslationState', { callSheetId: callId, translateButton: true})
        }
        this.$store.state.call.callList[this.tabType].list.forEach((item, index)=>{
          if (item.callTransText) {
            Vue.set(this.$store.state.call.callList[this.tabType].list[index], 'callTransText', false)
          }
        })
        Vue.set(this.$store.state.call.callList[this.tabType].list[num], 'callTransText', boolean)
      },
      callText (item) {
        let province = ''
        let distrist = ''
        let custom_mome = ''
        if (item.PROVINCE && item.PROVINCE==item.DISTRICT && !this.isHidenArea) {
          province = '(' + item.PROVINCE + ')'
        }
        if (item.PROVINCE && item.PROVINCE!=item.DISTRICT && !this.isHidenArea) {
          distrist = '(' + item.PROVINCE + '-' + item.DISTRICT + ')'
        }
        if (item.CUSTOMER_MEMO && this.isShowCallMemo) {
          custom_mome = '(' + item.CUSTOMER_MEMO + ')'
        }
        return province + distrist + custom_mome
      },
      getStatusName (status) {
        let cs = ''
        let custTmpls = this.$getCache('custTmpls')[0]
        if (custTmpls && custTmpls.status) {
          cs = custTmpls.status[status]
        }
        return cs
      },
      handleSelect (index,indexPath) { // 点击卡片刷新右侧
        this.$store.commit('call/REFRESH_CUST_RIGHT',Math.random());
        let id = index.split('/')[4]
        this.checkIntelligent(id);
      },
      checkIntelligent(id){
        if(this.tabType == 'cdr_call'){
          if(this.callCardList && this.callCardList.length){
            this.callCardList.forEach(item=>{
              if(item.CALL_SHEET_ID == id){
                if(item.transferFrom || !this.hasTransAuth){
                  //转接不展示金牌话术
                  this.$store.commit('call/TRANSFER_NO_INTELLIGENT',true)
                }else{
                  this.$store.commit('call/TRANSFER_NO_INTELLIGENT',false)
                }
              }
            })
          }
        }else if(this.tabType == 'cdr_outbound'){
          if(this.callCardList && this.callCardList.length){
            this.callCardList.forEach(item=>{
              if(item.CALL_SHEET_ID == id){
                if(!this.hasTransAuth){
                  //转接不展示金牌话术
                  this.$store.commit('call/TRANSFER_NO_INTELLIGENT',true)
                }else{
                  this.$store.commit('call/TRANSFER_NO_INTELLIGENT',false)
                }
              }
            })
          }
        }else if(this.tabType == 'cdr_all'){
          if(this.callCardList && this.callCardList.length){
            this.callCardList.forEach(item=>{
              if(item.CALL_SHEET_ID == id){
                if(item.CONNECT_TYPE == 'dialTransfer' || item.CONNECT_TYPE == 'transfer' || item.STATUS !== 'dealing' || !this.hasTransAuth){
                  //转接、未接听、无实时转写不展示金牌话术
                  this.$store.commit('call/TRANSFER_NO_INTELLIGENT',true)
                }else{
                  this.$store.commit('call/TRANSFER_NO_INTELLIGENT',false)
                }
              }
            })
          }
        }else if(this.tabType == 'cdr_pending'){
          this.$store.commit('call/TRANSFER_NO_INTELLIGENT',true)
        }
      },
      queryCallListCount (store, tabName, query) { // 批量操作全选的时候要查下总条数
        return store.dispatch('queryCallListCount', query)
      },
      getResultNameById (master, type) { // 根据id取name （status && queues）
        let current = ''
        let list = []
        if (type === 'status') {
          list = this.$getCache('callStatus') || []
        } else if (type === 'queues') {
          list = this.$getCache('queues') || []
        }
        if (!list) {
          return ''
        }
        for (let i in list) {
          if (type === 'status') {
            if (list[i].code_value === master) {
              current = m7Language('globalChineseKey.' + list[i].code_name, null, true) || list[i].code_name || ''
              break
            }
          } else if (type === 'queues') {
            if (list[i].Exten === master) {
              current = list[i].DisplayName || ''
              break
            }
          }
        }
        return current
      },
      callType (type) {
        return {CONNECT_TYPE: type}
      },
      removePendingToHandle (callId, custId, callType, status, tabType, ChannelStatus) { // 把未处理的通话标记成已处理
        let data = {_id: callId, PROCESS_STATUS: 'solved'}
        if (callType === 'normal' || tabType === 'cdr_call') { // 来电或者是来电转接或者是来电模块
          if (status === 'leak' || status === 'notDeal' || status === 'queueLeak' || status === 'limit' || (ChannelStatus !== 'Link' && callType.indexOf('ransfer') > -1)) { // 若通话类型是： ivr、振铃未接听、排队放弃、并发限制
            if ((ChannelStatus !== 'Link' && callType.indexOf('ransfer') > -1) || callType === 'normal') {
              let warnText = this.$t('call.missedWarning')
              if (tabType === 'cdr_call') {
                warnText = this.$t('call.cdrCallMissedWarning')
              }
              this.$confirm(warnText, this.$t('call.operaTip'), {
                confirmButtonText: this.$t('public.confirm'),
                cancelButtonText: this.$t('public.cancel'),
                cancelButtonClass: 'primary_btn',
                confirmButtonClass: 'primary_btn',
                type: 'warning'
              }).then(() => {
                this.$emit('changeProccessStatus', data, tabType) // 事件外抛
              }).catch(() => {
                console.log('取消')
              })
            } else {
              this.$emit('changeProccessStatus', data, tabType) // 事件外抛
            }
          } else if (custId === '00000000000000000000' || !custId) { // 未知客户
            let warnText = this.$t('call.unkonwCustWarning')
            if (tabType === 'cdr_call') {
              warnText = this.$t('call.cdrCallUnkonwCustWarning')
            }
            this.$confirm(warnText, this.$t('public.tip'), {
              confirmButtonText: this.$t('public.confirm'),
              cancelButtonText: this.$t('public.cancel'),
              cancelButtonClass: 'primary_btn',
              confirmButtonClass: 'primary_btn',
              type: 'warning'
            }).then(() => {
              this.$emit('changeProccessStatus', data, tabType) // 事件外抛
            }).catch(() => {
              console.log('取消')
            })
          } else { // 来电，不是未接听并且定位到客户
            this.$emit('changeProccessStatus', data, tabType) // 事件外抛
          }
        } else {
          this.$emit('changeProccessStatus', data, tabType) // 事件外抛
        }
      },
      isSameCallID (_id) {
        let arr = this.getKeyTagArr
        let flag = true
        if (arr.length > 0) {
          for (let i = 0; i < arr.length; i++) {
            if (arr[i] === _id) { // 只有id相同的时候才会去除通话标记
              flag = false
              break
            } else {
              flag = true
            }
          }
        }
        return flag
      },
      showOldAudio (curr) { // 展示旧的音频组件（原生audio）
        this.showOld = curr
      },
      closeModal () { // 关闭音频弹窗时，关闭音频
        this.pauseAudio = 'close'
        let myAudio = document.getElementById('quality-autoplay_callCardOldAudio')
        if (myAudio) {
          if (myAudio.currentSrc) {
            myAudio.pause()
          }
        }
      },
      openModal () { // 打开音频弹窗时，打开音频
        this.showOld = false // 每次打开弹窗默认隐藏旧的audio,以防切换到一个无效录音之后，再切换到有效录音还是旧的音频
        this.pauseAudio = 'open'
        let myAudio = document.getElementById('quality-autoplay_callCardOldAudio')
        if (myAudio) {
          if (myAudio.paused) {
            myAudio.currentTime = 0
            if (myAudio.currentSrc) { // url 有地址时
              myAudio.play()
            }
          }
        }
      },
      showCallNote (item) { // 打开添加备注的弹窗
        if ((this.tabType === 'cdr_all' && item.DISPOSAL_AGENT === this.$store.state.session.user._id) || this.tabType !== 'cdr_all') { // （全部 && 自己的通话记录） || 来电，去电，待处理
          this.$refs.labelAndNote.setShowAdd(true)
        } else {
          this.$refs.labelAndNote.setShowAdd(false)
        }
        this.$refs.labelAndNote.setShowOperaLog(false)
        this.$refs.labelAndNote.openDialog(item)
        this.callSheetId = item.CALL_SHEET_ID || ''
      },
      softBarDialoutPopup (historyNum) { // 卡片上的外呼
        this.$store.dispatch('phoneDialout', {phoneNum: historyNum})
      },
      getChecked () { // 单选获取数组
        return this.callCardList.filter(item => item.checked).map(item => item._id)
      },
      checkThis (checked) { // 单个选中传送数组和展示批量
        let checkedArr = this.getChecked()
        let isBatchShow = checkedArr.length > 0
        this.batch[this.tabType].allChecked = checkedArr.length === this.$store.state.call.callList[this.tabType].count
        this.batch[this.tabType].batchItem = checkedArr
        this.batch[this.tabType].isBatchShow = isBatchShow
        this.batch[this.tabType].checkedCount = checkedArr.length
      },
      checkAll () { // 全选&取消全选
        this.batch[this.tabType].isBatchShow = this.batch[this.tabType].allChecked
        console.log(this.batch[this.tabType].allChecked)
        console.log(this.batch[this.tabType].isBatchShow)
        let inputs = this.$el.getElementsByClassName('fbox')
        this.callCardList.forEach((item) => {
          item.checked = this.batch[this.tabType].allChecked
        })
        for (let i = 0; i < inputs.length; i++) { // 升级之后有bug需要手动将checkbox调整为相应状态
          inputs[i].checked = this.batch[this.tabType].allChecked
        }
        if (this.$store.state.call.callList[this.tabType].more) {
          this.batch[this.tabType].checkedCount = this.batch[this.tabType].allChecked ? m7Language('public.moreThan2') + this.$store.state.call.callList[this.tabType].count : 0
        } else {
          if (this.allCount) {
            this.batch[this.tabType].checkedCount = this.allCount
          } else {
            this.batch[this.tabType].checkedCount = this.batch[this.tabType].allChecked ? this.$store.state.call.callList[this.tabType].count : 0
          }
        }
      },
      checkNone () { // 取消全选
        this.batch[this.tabType].allChecked = false
        this.batch[this.tabType].batchItem = []
        this.batch[this.tabType].isBatchShow = false
        this.callCardList.forEach((item) => {
          item.checked = false
        })
      },
      getLastParameter (parameter) { // 时间参数整理
        let parameterObj = null
        if (parameter) {
          if (Array.isArray(parameter) && parameter.length === 2) {
            if (parameter[0] && parameter[1]) { // condition.OFFERING_TIME = {} 的时候，后台查询没有数据
              parameterObj = {}
              if (parameter[0] instanceof Date || typeof parameter[0] === 'string') {
                parameterObj.$gte = getFormatDateTime(parameter[0])
              }
              if (parameter[1] instanceof Date || typeof parameter[0] === 'string') {
                parameterObj.$lte = getFormatDateTime(parameter[1])
              }
            } else {
              parameterObj = null
            }
          } else {
            parameterObj = null
          }
        }
        return parameterObj
      },
      getIsRecordChannelCdr () { // 获取ivr轨迹是否开启
        let IsRecordChannelCdr = false
        let accountPbx = this.$store.state.session.account.pbx
        for (let i = 0; i < accountPbx.length; i++) {
          if (accountPbx[i].PBX === this.$store.state.session.user.pbx) {
            if (accountPbx[i].IsRecordChannelCdr === 'true') {
              IsRecordChannelCdr = true
            }
            break
          }
        }
        return IsRecordChannelCdr
      },
      handlExportExcel (count) { // 导出excel
        let that = this
        let taskBoundCount = 10000
        let accountId = that.$store.state.session.account.account
        if (accountId === 'N00000002630' || accountId === 'N00000002171' || accountId === 'N00000002407' || accountId === 'N00000031846' || accountId === 'N00000003004') {
          taskBoundCount = 50000
        }
        if (count <= 0) {
          this.$message({
            type: 'error',
            message: this.$t('message.selectOneOperation')
          })
          return
        }
        let data = {}
        let sessionId = this.$store.state.session.user._id
        if (this.tabType === 'cdr_my') {  // 判断导出我的通话记录
          this.condition.DISPOSAL_AGENT = sessionId
        }
        let query = _getSearchCondition(this.batch[this.tabType].allChecked, this.batch[this.tabType].batchItem, sessionId, deepClone(this.condition))
        let condition = deepClone(query)
        delete condition.INVESTIGATE
        let offerTime = query.OFFERING_TIME
        let endTime = query.HANGUP_TIME
        condition.OFFERING_TIME = this.getLastParameter(offerTime)
        condition.HANGUP_TIME = this.getLastParameter(endTime)
        condition.accountId = this.$store.state.session.account.account
        condition.type = 'CdrExport'
        condition.dataDB = this.$store.state.session.account.dataDB
        condition.user = sessionId
        condition.cdrExportType = 'call_sheet_advanced_query'
        condition.IsExportIVR = false
        if (this.tabType === 'cdr_my') {
          condition.PROCESS_STATUS = 'solved'
        }
        data.Method = 'exportCdr'
        data.Query = condition
        if (condition.ownercom) {
          let ownerIndex = condition.ownercom.indexOf('__')
          if (ownerIndex > -1) {
            condition.ownercom = condition.ownercom.slice(0, ownerIndex)
          }
        }
        if (this.tabType === 'cdr_all' && !this.$store.state.session.user.isAdmin && isHasFunc('func_not_allow_public_record', this.$store.state.session.user)) {
          condition.isPermissions = false
        }
        if (this.getIsRecordChannelCdr()) { // 若开启ivr轨迹，导出通话记录的时候，count <5k 直接导出，大于5K走任务
          this.$confirm(this.$t('call.sureExportIvr'), this.$t('public.tip'), {
            confirmButtonText: this.$t('public.yes'),
            cancelButtonText: this.$t('public.no'),
            cancelButtonClass: 'primary_btn',
            confirmButtonClass: 'primary_btn',
            closeOnClickModal: false,
            showClose: false,
            type: 'warning'
          }).then(() => {
            condition.IsExportIVR = true
            data.IsExportIVR = true
            this.showDerivedTransferAgent = true
            if (count > 5000 && count <= this.exportTaskLimit.callSheetIvr) { // 5000 走任务
              this.initCallExportType(condition, 'ivr')
              // this.toCallSheetTask(condition, 'ivr')
              return
            } else if (count > this.exportTaskLimit.callSheetIvr) {
              this.$message({
                type: 'error',
                message: this.$t('call.exportCallSheetNoOver', {limitNum: that.exportTaskLimit.callSheetIvr})
              })
              return
            }
            // 小于5000条的时候显示 流转座席表头
            this.showDerivedTransferAgent = false
            this.processExportAction(data, condition)
          }).catch(() => { // 选择了否，不导出ivr轨迹，和原来的流程一致
            this.showDerivedTransferAgent = false
            if (count > taskBoundCount && count <= this.exportTaskLimit.callSheet) { // 大于10000的时候走通话任务
              this.initCallExportType(condition)
              // this.toCallSheetTask(condition)
              return
            } else if (count > this.exportTaskLimit.callSheet) {
              this.$message({
                type: 'error',
                message: this.$t('call.exportCallSheetNoOver', {limitNum: that.exportTaskLimit.callSheet})
              })
              return
            }
            this.processExportAction(data, condition)
          })
        } else {
          if (count > taskBoundCount && count <= this.exportTaskLimit.callSheet) { // 大于10000的时候走通话任务
            // this.toCallSheetTask(condition)
            this.initCallExportType(condition)
            return
          } else if (count > this.exportTaskLimit.callSheet) {
            this.$message({
              type: 'error',
              message: this.$t('call.exportCallSheetNoOver', {limitNum: that.exportTaskLimit.callSheet})
            })
            return
          }
          this.processExportAction(data, condition)
        }
      },
      processExportAction (data, condition) { // 导出通话记录的action公共方法处理
        this.callExport.param = condition
        this.callExport.exportTypeTip = true
        this.exportRemark.show = false
        this.exportDialogIsCall = false
        this.exportCdrExcelData = data
      },
      exportCdrExcel(data) {
        this.exportCdrExcelData['Query']['headers'] = this.headers
        this.$store.dispatch('exportCdrExcel', {'data': this.exportCdrExcelData, 'type': this.tabType}).then((res) => {
          if (this.tabType === 'cdr_my') { // 避免删除全部通话里面的agent
            this.condition.DISPOSAL_AGENT = ''
          }
        })

        this.exportDialogIsCall = true
        this.exportRemark.show = true
        this.$message.success(this.$t('business.exportTip'))
        this.checkNone()
      },
      exportExcel () {
        let key = this.$store.state.session.sessionId + 'callExportHeaders'
        let callExportHeaders = JSON.parse(window.localStorage.getItem(key))
        this.listUnchecked(callExportHeaders)
        if (this.batch[this.tabType].allChecked) { // 全选的话要查询一次count
          this.queryCallListCount(this.$store, this.activeName, this.qu).then((resp) => {
            if (resp.success) {
              const _count = resp.count
              let count = _count
              this.handlExportExcel(count)
            }
          })
        } else {
          this.handlExportExcel(this.batch[this.tabType].checkedCount)
        }
      },
      toCallSheetTask (data, flag) {
        let newData = deepClone(data)
        let IsExportIVR = newData.IsExportIVR
        let exportType = this.callExport.exportType
        delete newData.accountId
        delete newData.type
        delete newData.dataDB
        delete newData.user
        delete newData.cdrExportType
        delete newData.IsExportIVR
        let actionData = null
        if (this.$store.state.isRealTimeExport) {
          if (this.callExport.isCust) {
            actionData = {query: newData, IsExportIVR: IsExportIVR, fileType: exportType, remark: this.exportRemark.text, isExportTransferAgent: this.DerivedTransferSeats}
          } else {
            actionData = {query: newData, IsExportIVR: IsExportIVR, fileType: exportType, remark: this.exportRemark.text}
          }
        } else {
          actionData = {query: newData, IsExportIVR: IsExportIVR}
        }
        this.$store.dispatch('addCallSheetExportTask', actionData).then(resp => {
          if (resp && resp.success) {
            // 兼容腾讯云文案
            let message
            let isRealTimeExport = this.$store.state.isRealTimeExport
            if (flag && flag === 'ivr') {
              message = isRealTimeExport ? this.$t('call.exportIvrCallSheetTaskSuccess') : this.$t('call.exportIvrCallSheetTaskSuccess_t')
              this.$message({
                type: 'success',
                message: message
              })
            } else {
              message = isRealTimeExport ? this.$t('call.exportCallSheetTaskSuccess') : this.$t('call.exportCallSheetTaskSuccess_t')
              this.$message({
                type: 'success',
                message: message
              })
            }
            // 成功后重置批量选择
            this.checkNone()
          } else {
            if (resp && resp.message.indexOf('export_task_max_limit') > -1) {
              this.$message({
                type: 'error',
                message: this.$t('message.export_task_max_limit')
              })
            } else {
              this.$message({
                type: 'error',
                message: this.$t('message.export_task_max_error')
              })
            }
          }
        })
      },
      toCallSheetChatTask (data, flag) {
        let newData = deepClone(data)
        let IsExportIVR = newData.IsExportIVR
        let exportType = 'excel'
        delete newData.accountId
        delete newData.type
        delete newData.dataDB
        delete newData.user
        delete newData.cdrExportType
        delete newData.IsExportIVR
        let actionData = null
        let queryData = {_id: newData._id, checkRecordExist: true}
        if (this.$store.state.isRealTimeExport) {
          if (this.callExport.isCust) {
            actionData = {query: newData, IsExportIVR: IsExportIVR, fileType: exportType, remark: this.exportRemark.text, isExportTransferAgent: this.DerivedTransferSeats}
          } else {
            actionData = {query: newData, IsExportIVR: IsExportIVR, fileType: exportType, remark: this.exportRemark.text}
          }
        } else {
          actionData = {query: newData, IsExportIVR: IsExportIVR}
        }
        this.$store.dispatch('addCallOfflineTranscriptionTask', actionData).then(resp => {
          if (resp && resp.success) {
            // 兼容腾讯云文案
            let message
            let isRealTimeExport = this.$store.state.isRealTimeExport
            if (flag && flag === 'ivr') {
              message = isRealTimeExport ? this.$t('call.exportIvrCallSheetTaskSuccess') : this.$t('call.exportIvrCallSheetTaskSuccess_t')
              this.$message({
                type: 'success',
                message: message
              })
            } else {
              message = isRealTimeExport ? this.$t('call.exportCallSheetTaskSuccess_c') : this.$t('call.exportCallSheetTaskSuccess_c')
              this.$message({
                type: 'success',
                message: message
              })
            }
            
            // 成功后重置批量选择
            this.checkNone()
          } else {
            if (resp && resp.message.indexOf('export_task_max_limit') > -1) {
              this.$message({
                type: 'error',
                message: this.$t('message.export_task_max_limit')
              })
            } else {
              this.$message({
                type: 'error',
                message: this.$t('message.export_task_max_error')
              })
            }
          }
        })
      },
      handlExportTask (count) { // 导出录音任务
        let sessionId = this.$store.state.session.user._id
        let query = _getSearchCondition(this.batch[this.tabType].allChecked, this.batch[this.tabType].batchItem, sessionId, deepClone(this.condition))
        let condition = deepClone(query)
        delete condition.INVESTIGATE
        let offerTime = query.OFFERING_TIME
        let endTime = query.HANGUP_TIME
        this.recordRemark = ''
        if (count > 10000) {
          this.$message({
            type: 'error',
            message: this.$t('message.exportListenFileOver10000')
          })
          return
        } else if (count <= 0) {
          this.$message({
            type: 'error',
            message: this.$t('message.selectOneOperation')
          })
          return
        }
        condition.OFFERING_TIME = this.getLastParameter(offerTime)
        condition.HANGUP_TIME = this.getLastParameter(endTime)
        if (condition.CALL_TIME_LENGTH_BEGIN || condition.CALL_TIME_LENGTH_END) {
          if (condition.CALL_TIME_LENGTH_BEGIN) {
            if (!('CALL_TIME_LENGTH' in condition)) {
              condition.CALL_TIME_LENGTH = {}
            }
            condition.CALL_TIME_LENGTH['$gte'] = parseInt(condition.CALL_TIME_LENGTH_BEGIN)
          }
          delete condition.CALL_TIME_LENGTH_BEGIN
          if (condition.CALL_TIME_LENGTH_END) {
            if (!('CALL_TIME_LENGTH' in condition)) {
              condition.CALL_TIME_LENGTH = {}
            }
            condition.CALL_TIME_LENGTH['$lte'] = parseInt(condition.CALL_TIME_LENGTH_END)
          }
          delete condition.CALL_TIME_LENGTH_END
        }
        if (condition.QUEUE_TIME_LENGTH_BEGIN || condition.QUEUE_TIME_LENGTH_END) {
          if (condition.QUEUE_TIME_LENGTH_BEGIN) {
            if (!('QUEUE_TIME_LENGTH' in condition)) {
              condition.QUEUE_TIME_LENGTH = {}
            }
            condition.QUEUE_TIME_LENGTH['$gte'] = parseInt(condition.QUEUE_TIME_LENGTH_BEGIN)
          }
          delete condition.QUEUE_TIME_LENGTH_BEGIN
          if (condition.QUEUE_TIME_LENGTH_END) {
            if (!('QUEUE_TIME_LENGTH' in condition)) {
              condition.QUEUE_TIME_LENGTH = {}
            }
            condition.QUEUE_TIME_LENGTH['$lte'] = parseInt(condition.QUEUE_TIME_LENGTH_END)
          }
          delete condition.QUEUE_TIME_LENGTH_END
        }
        if (this.tabType === 'cdr_my') {
          condition.DISPOSAL_AGENT = sessionId
          condition.PROCESS_STATUS = 'solved'
        }
        if (!condition.OFFERING_TIME) {
          delete condition.OFFERING_TIME
        }
        if (this.tabType === 'cdr_all' && !this.$store.state.session.user.isAdmin && isHasFunc('func_not_allow_public_record', this.$store.state.session.user)) {
          condition.isPermissions = false // 是否能查询公共通话记录（没有分配到坐席的就是公共通话记录）
        }
        condition.checkRecordExist = true
        if (condition.ownercom) {
          let ownerIndex = condition.ownercom.indexOf('__')
          if (ownerIndex > -1) {
            condition.ownercom = condition.ownercom.slice(0, ownerIndex)
          }
        }
        this.queryData = deepClone(condition)
        this.$store.dispatch('addExportMonitorTask', condition).then(rep => {
          if (rep.success) {
            let num = ''
            for (let i = 0; i < 19; i++) {
              num += Math.floor(Math.random() * 10).toString()
            }
            let name = this.$store.state.session.user.account + '_' + this.$store.state.session.user.pbx + '_' + num
            this.defaultName = name
            this.defineDialogForm = true
            delete condition.isPermissions
            delete condition.OFFERING_TIME
            delete condition.PROCESS_STATUS
            // 成功后重置全选
          } else if (rep.message === 'expired_record_exists') {
            this.$message.error(this.$t('call.exportOverLimit', {recordStore: rep.recordStore, validStartDate: rep.validStartDate}))
          }
        })
      },
      exportTask () {
        if (this.batch[this.tabType].allChecked) { // 全选的话要查询一次count
          this.queryCallListCount(this.$store, this.activeName, this.qu).then((resp) => {
            if (resp.success) {
              this.handlExportTask(resp.count)
            }
          })
        } else {
          this.handlExportTask(this.batch[this.tabType].checkedCount)
        }
      },
      confirmDownloadMonitor () {
        let data = this.queryData
        data.remark = this.recordRemark
        delete data.checkRecordExist
        // data.fileName = new Date().getFullYear().toString() + (new Date().getMonth() + 1).toString() + new Date().getDate().toString() + '_' + this.defaultName.trim().replace(/\s/g, '')
        data.fileName = dateParse(new Date()).split('-').join('') + '_' + this.defaultName.trim().replace(/\s/g, '')
        if (!(/^[\u4E00-\u9FA5a-zA-Z0-9_.-]*$/).test(data.fileName)) {
          this.$message.error(this.$t('call.symbolForbid'))
          return
        }
        this.defineDialogForm = false
        this.$store.dispatch('addExportMonitorTask', data).then(rep => {
          if (rep.success) {
            this.$message({
              message: this.$t('call.exportMonitorTaskSuccess'),
              type: 'success'
            })
            this.checkNone()
          }
        })
      },
      // 按照 卡片的_id不同设置不同路由
      handleSplit (index, custmoerId, obj) {
        let path = ''
        if (this.tabType === 'cdr_call') {
          path = '/index/' + this.type + '/' + this.tabType + '/' + index + '/cdr?flag=list'
        } else if (this.tabType === 'cdr_outbound') {
          path = '/index/' + this.type + '/' + this.tabType + '/' + index + '/outbound'
        } else {
          path = '/index/' + this.type + '/' + this.tabType + '/' + index
        }
        return path
      },
      showListentWindow (server, name, status, pbx, callTimeLen) { // 录音弹窗
        this.callStatus = status || ''
        if (server.indexOf('record.7moor.com') > -1 || server.indexOf('m7-record.oss-cn-hangzhou') > -1 || server.indexOf('aliyuncs.com') > -1) {
          server = 'https' + server.substr(server.indexOf(':'), server.length)
          if (status === 'voicemail' || status === 'dealing') { // 只有已接听和已留言才会是有效的录音地址
            this.fileServer = server
            this.fileName = name
            this.callTimeLen = callTimeLen
          }
          this.listent = true
        } else if (document.location.protocol === 'https:') {
          let self = this
          if (pbx) {
            getCache('accountPbx', pbx, this, function (pbxObj) {
              if (pbxObj) {
                if (pbxObj.assDomain) {
                  let assDomain = pbxObj.assDomain
                  if (assDomain.substr(assDomain.length - 1, assDomain.length) === '/') {
                    assDomain = assDomain.substr(0, assDomain.length - 1)
                  }
                  server = assDomain
                }
              }
              if (status === 'voicemail' || status === 'dealing') { // 只有已接听和已留言才会是有效的录音地址
                self.fileServer = server
                self.fileName = name
                self.callTimeLen = callTimeLen
              }
              self.listent = true
            })
          } else {
            if (status === 'voicemail' || status === 'dealing') { // 只有已接听和已留言才会是有效的录音地址
              this.fileServer = server
              this.fileName = name
              this.callTimeLen = callTimeLen
            }
            this.listent = true
          }
        } else {
          if (status === 'voicemail' || status === 'dealing') { // 只有已接听和已留言才会是有效的录音地址
            this.fileServer = server
            this.fileName = name
            this.callTimeLen = callTimeLen
          }
          this.listent = true
        }
        this.refreshAudio = Math.random()
      },
      initCallExportType (condition, type) {
        if (type && type === 'ivr') {
          this.callExport.isIvR = true
        } else {
          this.callExport.isIvR = false
        }
        this.callExport.param = condition
        this.callExport.exportType = 'csv'
        this.callExport.isHiddenAssociate = false
        this.isChatExport = false
        if (this.$store.state.isRealTimeExport) {
          let accountId = this.$store.state.session.account.account
          if ((accountId === 'N00000002171' || accountId === 'N00000002630' || accountId === 'N00000011102' || accountId === 'T00000000003' || accountId === 'N00000011102' || accountId === 'N00000003731') && !this.callExport.isIvR) {
            this.callExport.isCust = true
          } else {
            this.callExport.isCust = false
          }
          this.callExport.exportTypeTip = true
          this.DerivedTransferSeats = false
        } else {
          // this.callExportTypeSelect()
          this.exportRemark.show = false
          this.callExport.exportTypeTip = true
        }
      },
      initCallChatExportType (condition, type) {
        if (type && type === 'ivr') {
          this.callExport.isIvR = true
        } else {
          this.callExport.isIvR = false
        }
        this.callExport.param = condition
        this.callExport.exportType = 'excel'
        this.callExport.isHiddenAssociate = true
        this.exportRemark.show = true
        this.callExport.exportTypeTip = true
        this.isChatExport = true
        // this.exportDialogIsCall = false
        // if (this.$store.state.isRealTimeExport) {
        //   let accountId = this.$store.state.session.account.account
        //   if ((accountId === 'N00000002171' || accountId === 'N00000002630' || accountId === 'N00000011102' || accountId === 'T00000000003' || accountId === 'N00000011102' || accountId === 'N00000003731') && !this.callExport.isIvR) {
        //     this.callExport.isCust = true
        //   } else {
        //     this.callExport.isCust = false
        //   }
        //   this.callExport.exportTypeTip = true
        //   this.DerivedTransferSeats = false
        // } else {
        //   this.exportRemark.show = false
        //   this.callExport.exportTypeTip = true
        // }
      },
      callExportTypeSelect (selectObj) {
        this.processSelectionData(selectObj)
        if (selectObj.checkedExportHeads.indexOf('TRANSFER_AGENT') > -1) {
          this.exportDialogIsCall = true
        }
        if (this.exportDialogIsCall) {
          let param = this.callExport.param
          param.headers = this.headers
          if (this.callExport.isIvR) {
            this.toCallSheetTask(param, 'ivr')
          } else {
            if (this.isChatExport) {
              // 导出离线转写内容
              param.headers[0]['callHeaders'].push('CALL_CONTENT')
              this.toCallSheetChatTask(param)
            } else {
              this.toCallSheetTask(param)
            }
          }
        } else {
          this.exportCdrExcel()
        }
        this.callExport.isCust = false
        this.callExport.exportTypeTip = false
        this.callExport.isHiddenAssociate = false
      },
      callExportClose () {
        this.callExport.exportType = 'csv'
        this.callExport.param = {}
        this.isIvR = false
        this.callExport.exportTypeTip = false
      },
      processSelectionData (obj) {
        this.headers = [{callHeaders:obj.checkedExportHeads},{customerHeaders:obj.checkedExportCustomerHeads}]
        this.callExport.exportType = obj.exportLayout
        this.exportRemark.text = obj.textarea
        this.DerivedTransferSeats = obj.DerivedTransferSeats
        let sessionId = this.$store.state.session.sessionId
        try { // try catch是因为local存储暴了之后，会报错，影响后面的逻辑进行
          window.localStorage.setItem(sessionId + 'callExportHeaders', JSON.stringify(this.headers))
        } catch (e) {}
      },
      exportDialogCancelFun () {
        this.callExport.exportType = 'csv'
        this.callExport.param = {}
        this.isIvR = false
        this.callExport.exportTypeTip = false
        this.exportDialogIsCall = true
        this.exportRemark.show = true
        this.callExport.isCust = false
        this.isChatExport = false
        this.callExport.isHiddenAssociate = false
      },
      exportChat () {
        if (this.batch[this.tabType].allChecked) { // 全选的话要查询一次count
          this.queryCallListCount(this.$store, this.activeName, this.qu).then((resp) => {
            if (resp.success) {
              const _count = resp.count
              let count = _count
              this.handlExportChat(count)
            }
          })
        } else {
          this.handlExportChat(this.batch[this.tabType].checkedCount)
        }
      },
      handlExportChat (count) { // 导出excel
        let key = this.$store.state.session.sessionId + 'callExportHeaders'
        let callExportHeaders = JSON.parse(window.localStorage.getItem(key))
        this.listUnchecked(callExportHeaders)
        let SingleOrDoubleTrack = false
        this.$store.state.session.account.pbx.some((item)=>{
          if (item.SingleOrDoubleTrack && item.SingleOrDoubleTrack!== 'false') {
            SingleOrDoubleTrack = true
            return true
          }
        })
        if (!SingleOrDoubleTrack) {
          this.$message({
            type: 'error',
            message: '您的账户没有启用录音双声道！'
          })
          return
        }
        let sessionId = this.$store.state.session.user._id
        let query = _getSearchCondition(this.batch[this.tabType].allChecked, this.batch[this.tabType].batchItem, sessionId, deepClone(this.condition))
        let condition = deepClone(query)
        delete condition.INVESTIGATE
        let offerTime = query.OFFERING_TIME
        let endTime = query.HANGUP_TIME
        this.recordRemark = ''
        if (count > 10000) {
          this.$message({
            type: 'error',
            message: this.$t('message.exportListenFileOver10000')
          })
          return
        } else if (count <= 0) {
          this.$message({
            type: 'error',
            message: this.$t('message.selectOneOperation')
          })
          return
        }
        condition.OFFERING_TIME = this.getLastParameter(offerTime)
        condition.HANGUP_TIME = this.getLastParameter(endTime)
        if (condition.CALL_TIME_LENGTH_BEGIN || condition.CALL_TIME_LENGTH_END) {
          if (condition.CALL_TIME_LENGTH_BEGIN) {
            if (!('CALL_TIME_LENGTH' in condition)) {
              condition.CALL_TIME_LENGTH = {}
            }
            condition.CALL_TIME_LENGTH['$gte'] = parseInt(condition.CALL_TIME_LENGTH_BEGIN)
          }
          delete condition.CALL_TIME_LENGTH_BEGIN
          if (condition.CALL_TIME_LENGTH_END) {
            if (!('CALL_TIME_LENGTH' in condition)) {
              condition.CALL_TIME_LENGTH = {}
            }
            condition.CALL_TIME_LENGTH['$lte'] = parseInt(condition.CALL_TIME_LENGTH_END)
          }
          delete condition.CALL_TIME_LENGTH_END
        }
        if (condition.QUEUE_TIME_LENGTH_BEGIN || condition.QUEUE_TIME_LENGTH_END) {
          if (condition.QUEUE_TIME_LENGTH_BEGIN) {
            if (!('QUEUE_TIME_LENGTH' in condition)) {
              condition.QUEUE_TIME_LENGTH = {}
            }
            condition.QUEUE_TIME_LENGTH['$gte'] = parseInt(condition.QUEUE_TIME_LENGTH_BEGIN)
          }
          delete condition.QUEUE_TIME_LENGTH_BEGIN
          if (condition.QUEUE_TIME_LENGTH_END) {
            if (!('QUEUE_TIME_LENGTH' in condition)) {
              condition.QUEUE_TIME_LENGTH = {}
            }
            condition.QUEUE_TIME_LENGTH['$lte'] = parseInt(condition.QUEUE_TIME_LENGTH_END)
          }
          delete condition.QUEUE_TIME_LENGTH_END
        }
        if (this.tabType === 'cdr_my') {
          condition.DISPOSAL_AGENT = sessionId
          condition.PROCESS_STATUS = 'solved'
        }
        if (!condition.OFFERING_TIME) {
          delete condition.OFFERING_TIME
        }
        if (this.tabType === 'cdr_all' && !this.$store.state.session.user.isAdmin && isHasFunc('func_not_allow_public_record', this.$store.state.session.user)) {
          condition.isPermissions = false // 是否能查询公共通话记录（没有分配到坐席的就是公共通话记录）
        }
        condition.checkRecordExist = true
        if (condition.ownercom) {
          let ownerIndex = condition.ownercom.indexOf('__')
          if (ownerIndex > -1) {
            condition.ownercom = condition.ownercom.slice(0, ownerIndex)
          }
        }
        this.queryData = deepClone(condition)
        this.$store.dispatch('addExportMonitorTask', condition).then(rep => {
          if (rep.success) {
            let that = this
            let taskBoundCount = 0
            let accountId = that.$store.state.session.account.account
            if (accountId === 'N00000002630' || accountId === 'N00000002171' || accountId === 'N00000002407' || accountId === 'N00000031846' || accountId === 'N00000003004') {
              taskBoundCount = 0
            }
            if (count <= 0) {
              this.$message({
                type: 'error',
                message: this.$t('message.selectOneOperation')
              })
              return
            }
            let data = {}
            let sessionId = this.$store.state.session.user._id
            if (this.tabType === 'cdr_my') {  // 判断导出我的通话记录
              this.condition.DISPOSAL_AGENT = sessionId
            }
            let query = _getSearchCondition(this.batch[this.tabType].allChecked, this.batch[this.tabType].batchItem, sessionId, deepClone(this.condition))
            let condition = deepClone(query)
            delete condition.INVESTIGATE
            let offerTime = query.OFFERING_TIME
            let endTime = query.HANGUP_TIME
            condition.OFFERING_TIME = this.getLastParameter(offerTime)
            condition.HANGUP_TIME = this.getLastParameter(endTime)
            condition.accountId = this.$store.state.session.account.account
            condition.type = 'CdrExport'
            condition.dataDB = this.$store.state.session.account.dataDB
            condition.user = sessionId
            condition.cdrExportType = 'call_sheet_advanced_query'
            condition.IsExportIVR = false
            if (this.tabType === 'cdr_my') {
              condition.PROCESS_STATUS = 'solved'
            }
            data.Method = 'exportCdr'
            data.Query = condition
            if (condition.ownercom) {
              let ownerIndex = condition.ownercom.indexOf('__')
              if (ownerIndex > -1) {
                condition.ownercom = condition.ownercom.slice(0, ownerIndex)
              }
            }
            if (this.tabType === 'cdr_all' && !this.$store.state.session.user.isAdmin && isHasFunc('func_not_allow_public_record', this.$store.state.session.user)) {
              condition.isPermissions = false
            }
            if (count > taskBoundCount && count <= this.exportTaskLimit.callSheet) { // 大于10000的时候走通话任务
              this.initCallChatExportType(condition)
              return
            } else if (count > this.exportTaskLimit.callSheet) {
              this.$message({
                type: 'error',
                message: this.$t('call.exportCallSheetNoOver', {limitNum: that.exportTaskLimit.callSheet})
              })
              return
            }
            this.processExportAction(data, condition)
          } else if (rep.message === 'expired_record_exists') {
            this.$message.error(this.$t('call.exportOverLimit', {recordStore: rep.recordStore, validStartDate: rep.validStartDate}))
          }
        })
      },
      listUnchecked(list){
        if(list){
          this.exportHeads.forEach(item=>{
            if(list[0].callHeaders.includes(item.name)){
              item.unChecked = false
            }else{
              item.unChecked = true
            }
          })
          this.cusFieldArr.forEach(item=>{
            if(list[1].customerHeaders.includes(item.name)){
              item.unChecked = false
            }else{
              item.unChecked = true
            }
          })
          return this.exportHeads
        }
      }
    },
    directives: { // 自定义指令 改变文字color的值
      statusColor: {
        inserted (el, binding, vnode) {
          let self = vnode.context
          let statusConfig = {}
          let custTmpls = self.$getCache('custTmpls')
          if (custTmpls && custTmpls[0]) { // 以防报错
            statusConfig = custTmpls[0].statusConfig || {}
          }
          if (binding.value) {
            if (statusConfig && statusConfig[binding.value]) {
              el.style.color = statusConfig[binding.value].color
            } else {
              el.style.color = self.statusColors[binding.value] ? self.statusColors[binding.value] : '#009FE3'
            }
          }
        },
        update (el, binding, vnode) {
          let self = vnode.context
          let statusConfig = {}
          let custTmpls = self.$getCache('custTmpls')
          if (custTmpls && custTmpls[0]) { // 以防报错
            statusConfig = custTmpls[0].statusConfig || {}
          }
          if (binding.value) {
            if (statusConfig && statusConfig[binding.value]) {
              el.style.color = statusConfig[binding.value].color
            } else {
              el.style.color = self.statusColors[binding.value] ? self.statusColors[binding.value] : '#009FE3'
            }
          }
        }
      }

    },
    watch: {
      // clearChecked 变化 再次执行
      clearChecked: 'checkNone',
      $route(val,val2){
        /**
         * 解决当在全部tab页中没有金牌话术，外呼或来电直接打开卡片时，也会不显示金牌话术tab的问题
         */
        if(this.tabType == 'cdr_outbound'|| this.tabType == 'cdr_call'){
          if(val.params.id && val2.params.tabType!==this.tabType){
            this.checkIntelligent(val.params.id)
          }
        }
      }
    },
    components: {
      CustomerAvatar,
      CardBatch,
      NoRecord,
      Queues,
      IvrKeyDetail,
      AudioCommon,
      OldAudioCommon,
      exportDialog,
      CallTrans,
      LabelAndNote
    },
    beforeMount () {
      this.$store.dispatch('getCache', {type: 'translationConfig'}).then((res) => {
          if (res.sumAgent) {
            let userId = this.$store.state.session.user._id
            if (res.uids && res.uids.indexOf(userId) > -1) {
              this.hasTransAuth = true
            }
          }
      })
      this.$store.dispatch('getCache', { type: 'serviceNo' }).then((res) => {
        this.serviceNoList = res || []
      }) // 服务号
      this.isEnglis = window.localStorage.lang || 'zh_CN'
      this.exportTaskLimit = this.$getCache('exportTaskLimit') || {}
      let callValue = '' // this.item.STATUS
      this.$store.dispatch('getDicCacheName', {type: 'callStatus', value: callValue}).then((req) => { // 获取通话状态
        this.cardLoading = false
        if (this.$store.state.session.user.isAdmin || !isHasFunc('func_user_call_sheet_listen_file', this.$store.state.session.user)) {
          this.isListent = true
        }
      })
      this.$store.dispatch('getCache', { type: 'ivrNodeKeyMemo' }).then((req) => { // 获取按键菜单配置
        this.keyMemoMap = req
      })
      if (!isHasMenu('call_sheet_export_monitor_task', this.$store.state.session.user)) {
        // 提交批量导出录音任务
        this.batch.cdr_all.operator = [{name: 'public.export', class: 'icon-daochu1', action: 'exportExcel'}]
        this.batch.cdr_my.operator = [{name: 'public.export', class: 'icon-daochu1', action: 'exportExcel'}]
      }
      if (!isHasFunc('func_export_cdr', this.$store.state.session.user)) {
        // 导出通话记录/录音
        this.batch.cdr_all.operator = [{name: 'public.exportTask', class: 'icon-piliang', action: 'exportTask'}]
        this.batch.cdr_my.operator = [{name: 'public.exportTask', class: 'icon-piliang', action: 'exportTask'}]
      }
      let user = this.$store.state.session.user
      if (isHasFunc('func_hide_cdr_area', user) || (this.$store.state.session.account.isSouthEastAsia && this.$store.state.session.account.isSouthEastAsia === 'true')) {
        if (user.type === 'admin' && user.exten === '0000') {
          this.isHidenArea = false
        } else {
          this.isHidenArea = true
        }
      }
      if (!isHasMenu('call_sheet_export_monitor_task', this.$store.state.session.user) && !isHasFunc('func_export_cdr', this.$store.state.session.user)) {
        // 导出通话记录/录音和提交批量导出录音任务都没有权限时
        this.batch.cdr_all.operator = []
        this.batch.cdr_my.operator = []
      }
      if (isHasMenu('submit_export_chat_content_task', this.$store.state.session.user)) {
        this.batch.cdr_all.operator.push({name: 'public.ChatContentExportTask', class: 'icon-piliang', action: 'exportChat'})
      }
        // 当页面刷新时保持通话详情来电列表的显示
      let storage = window.sessionStorage
      if (storage.getItem('callList') && storage.getItem('callList') !== 'undefined') {
        let list = JSON.parse(storage.getItem('callList'))
        this.$store.dispatch('callItemPush', {tabType: 'cdr_call', list: list})
      }
      if (storage.getItem('callOutList') && storage.getItem('callOutList') !== 'undefined') {
        let outList = JSON.parse(storage.getItem('callOutList'))
        this.$store.dispatch('callItemPush', {tabType: 'cdr_outbound', list: outList})
      }
      // if (storage.getItem('goldenMonitor') && storage.getItem('goldenMonitor') !== 'undefined') {
      //   let goldenMonitor = JSON.parse(storage.getItem('goldenMonitor'))
      //   this.$store.commit('call/GOLDEN_MONITOR', goldenMonitor)
      // }
      // 导出关联客户字段
      this.$store.dispatch('getCache', {type: 'custTmpls'}).then((res) => {
        if (res.length <= 0) { // 新开的账户，没有数据
          return
        }
        let _stable_fields = res[0].stable_fields || []
        for (let i = 0; i < _stable_fields.length; i++) {
          if (_stable_fields[i].name === 'phone') {
             if (_stable_fields[i].isShowCall) {
               this.isShowCallMemo = true
             }
          }
          if (!_stable_fields[i].isShow) {
            this.cusFieldArr.push({
              name: _stable_fields[i].name,
              value: _stable_fields[i].value
            })
          }
        }
        let _arr = [
          {name: 'owner', value: this.$t('customer.ownerPeople')},
          {name: 'ownerNo', value: this.$t('webchat.exportHead.agentNum')},
          {name: 'taskId', value: this.$t('webchat.exportHead.outcallTask')},
          {name: 'taskCalled', value: this.$t('webchat.exportHead.dialState')},
          {name: 'status', value: this.$t('webchat.exportHead.custStatus')},
          {name: 'source', value: this.$t('customer.dataSource')},
          {name: 'creator', value: this.$t('public.creator')},
          {name: 'createTime', value: this.$t('webchat.createTime')},
          {name: 'lastUpdateTime', value: this.$t('monitor.updateTime')},
          {name: 'attachs', value: this.$t('public.attach')},
          {name: 'customFields', value: this.$t('customer.customField')},
          {name: 'sysStatus', value: this.$t('customer.sysStatus')},
          {name: 'categoryId', value: this.$t('customer.categoryId')}
        ]
        this.cusFieldArr = [...this.cusFieldArr, ..._arr]
      })
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../assets/common.styl"
  .card
    height 100%
  .el-menu-item
    height auto
    line-height inherit
  .el-menu-item.custom-is-active
    .phon
      background-color $c-card-active
  .phon
    &:hover
      background-color $c-card-hover
    &:hover >.el-checkbox, &:hover >label
      visibility visible
  /*.el-checkbox
      visibility hidden*/
  .e-ch-show
      visibility visible
  .phon
    padding 10px
    height 92px
    box-sizing border-box
    border-bottom 1px solid $c-border1
    background-color $cf-white
    display flex
    cursor pointer
    align-items center
    color $cf-gray0
    position relative
    line-height 1
    .icon-zhuanjie3
      color $c-email
    .icon-chao
      position absolute
      left 9px
      color #ff6b6b
      top 27px
    i.key-tag
      color $c-email
    .hour-box
      color $c-main
      font-size 22px
      padding 0 3px
    .icon-waihu,.icon-huru,.icon-zhuanjie3
      font-size 12px
      position absolute
      z-index 9
      line-height 18px
      left 9px
      top 52px
    .icon-waihu
      color $c-email
    .icon-huru
      color $c-cAgent
    .sta
      color $c-pink
    .dealing,.voicemail
      color $c-email
    .blackList,.limit
      color $cf-gray3
    .ivrKey-wrap
      color  $cf-gray4
      position absolute
      bottom 26px
      right 10px
    .custom_ivrkey
      bottom 52px
    .fake-checkbox
      left 9px
      top 12px
    span
      display inline-block
    .call
      flex 3
      padding-left 16px
      display inline-block
      .clearfix:after
        display block
       .customvar-style
         color #ff6b6b
         border 1px solid #ffcccc
         background #fff2f2
         padding 4px 6px
         display inline-block
         margin-top 6px
         max-width 288px
         text-overflow ellipsis
         white-space nowrap
         overflow hidden
         border-radius 3px
       .middle2
         align-items center
       .middle4,.middle2
        display flex
        justify-content space-between
        justify-content flex-end
        height 13px
        width 300px
       .cust-type
         max-width 6em
       .moddle2-left
         flex 3
         overflow hidden
         text-overflow ellipsis
       .middle4-con
         flex 1
         overflow hidden
         text-overflow ellipsis
       .middle2
         color $cf-gray2
         height 28px
         line-height 28px
      span
        font-size 12px
      span.play
        transform scale(.8)
        width 18px
        height 18px
        border 1px solid $c-main
        margin 0px 4px 0 0
        border-radius 50%
        strong
          display inline-block
          width 0
          height 0
          border 4px solid $c-main
          border-color transparent transparent transparent $c-main
          margin 5px 0px 1px 8px
    .time
      flex 1
      float right
    .middle
      height 16px
      line-height 16px
      &:after
        content ''
        display block
        clear both
        overflow hidden
    .cust-name-wrap
      span.cust-name
        max-width 14em
        font-size 14px
        font-weight bold
        color $cf-gray2
        position relative
        padding-right 10px
        .callIsRead
          display block
          position absolute
          width 8px
          height 8px
          background #f37474
          border-radius 50%
          right 0
          top 0
      .time
        font-weight normal
    span.cdr-call-name
      padding 8px 6px 6px 0
    span.cust-phone
      padding-right 4px
    .icon-group
      display none
      width 57px
      height 16px
      float right
      .iconfont
        font-size 14px
    .icon-text-right
      text-align right
  .phon.phon_call
    height 75px
  .phon.customvar_height
    height 100px
  .el-menu-item:hover
    .phon .time
      display none
    .icon-group
      display inline
      .icon-dadianhua
        margin-left 6px
      i
        color $c-main
      .icon-qiapianshangdeguanbi
        margin-left 6px
        color $c-pink
  .no-call
    color $c-prompt
    text-align left
    padding 20px 0 0 10px
.middle3
  position relative
  margin-bottom 5px
  .play
    position absolute
    top -4px
    right 48px
.call-time-len
  float right
  width 50px
.time,.call-time-len
  color $cf-gray6
.middle4,.callend-num
  color $cf-gray4
.callend-num
  max-width 19em
.agent-name,.queues-name,.callend-num
  vertical-align bottom
.agent-name,.queues-name-wrap
  padding-right 4px
.icon-dailingqu
  padding 0 6px
#cdr_call_id .el-menu-vertical-demo .el-menu-item:nth-child(n+21)
  display none
</style>
<style lang='stylus'>
  @-webkit-keyframes changeright {
    0%{-webkit-transform:rotate(0deg)}
    50%{-webkit-transform:rotate(180deg)}
    100%{-webkit-transform:rotate(360deg)}
  }
  .el-menu-item.is-active
      .zhuanxieicon
        color #ff9100
  .trans-icon-wrap
    margin-right 11px
    margin-top -1px
    float right
    .zhuanxieicon
      animation changeright 6s linear infinite
      display inline-block
      color #ff9100
  .exportTypeTip
    .el-dialog__footer
      padding-bottom 5px
      padding-top 0
  .exportTypeTip_box
    p
      margin-bottom 20px
    p:nth-last-of-type(1)
      margin-bottom 0
    font-size 14px
    .el-radio
      .el-radio__label
        color black
        font-size 14px
        span
          font-size 12px
          color #409EFF
    .el-radio__inner::after
      background black
      width 6px
      height 6px
    .el-radio__input.is-checked
      .el-radio__inner
        background white
        border-color black
    .el-radio__inner
      border 1px solid black
</style>
